import React, { useState } from "react";
import "./doubao.scss";
import axios from "axios";
import ReactMarkdown from "react-markdown";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
const App1 = () => {
  const [list, setList] = useState([]);
  const [message, setMessage] = useState("")
  const handleEnter = async (e) => {
    if (e.keyCode === 13) {
      setList((prev) => [...prev, { pos: "right", content: e.target.value }]);
      const resp = await axios.get("/api/doubao?content=" + e.target.value);
      setList((prev) => [...prev, { pos: "left", content: resp.data.data }]);
    }
  };
  return (
    <div className="doubao">
      <h1>欢迎使用豆包大模型！！！！</h1>

      <div className="list">
        {list.map((v, i) => {
          return (
            <div className={`list-item-${v.pos}`} key={i}>
              <ReactMarkdown
                components={{
                  code({ children, className, inline }) {
                    // 匹配否指定语言
                    const match = /language-(\w+)/.exec(className || "");
                    return (
                      <>
                        {!inline ? (
                          <SyntaxHighlighter
                            showLineNumbers={true}
                            language={match && match[1]}
                          >
                            {String(children).replace(/\n$/, "")}
                          </SyntaxHighlighter>
                        ) : (
                          <code className={className} style={inlineCodeStyle}>
                            {children}
                          </code>
                        )}
                      </>
                    );
                  },
                }}
              >
                {v.content}
              </ReactMarkdown>
            </div>
          );
        })}

        <div className="list-item-right"></div>
      </div>

      <div className="bottom">
        <input
          placeholder="请输入问题"
          onKeyDown={(e) => handleEnter(e)}
          value={message}
          onChange={(e) => setMessage(stringReplaceEmoji(e.target.value))}
        ></input>
      </div>
    </div>
  );
};

export default App1;
